<template>
    <div class="box">
        <leftTitle title="实时用电"></leftTitle>
        <div class="content">
            <div class="mainTop">
                <div>
                    <img src="../../assets/总用电量.png" alt="">
                    <div>
                        <span>{{ totalDian }}</span>
                        <span>总用电量(Kw)</span>
                    </div>
                </div>
                <div>
                    <img src="../../assets/总用电量.png" alt="">
                    <div>
                        <span>{{ HDian }}</span>
                        <span>总用电量(Kw/H)</span>
                    </div>
                </div>
            </div>
            <div class="chart">
                <chart :option="option" :key="key"></chart>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import leftTitle from './leftTitle.vue';
import { ref, onMounted } from 'vue'
import { get } from '@/request/methods';
import chart from './components/chart.vue';
// 总用电量
const totalDian = ref(0)
const HDian = ref(0)
const key = ref(0)


let option = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },

    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            symbol: 'none',
            lineStyle: { color: 'red' },
            areaStyle: { color: 'rgba(255, 0, 0, .9)' },
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
});

get({ url: '/v1.0/api/deviceWorking/electricityConsumption' }).then(res => {
    let data = res.data.data
    data.forEach((item: { value: never }) => {
        // console.log(item);
        totalDian.value += item.value
        HDian.value = Math.floor(totalDian.value / 24)
        option.value.series[0].data.push(item.value)
    })
    key.value = +new Date()

})





</script>

<style lang="scss" scoped>
.box {
    width: 75%;
    height: calc(40% - 40px);
    margin-left: 70px;

    .content {
        background-color: rgba(255, 255, 255, .1);
        width: 100%;
        height: calc(100% - 45px);
        margin-top: 10px;

        .mainTop {
            width: 100%;
            height: 40px;
            color: #fff;
            display: flex;
            justify-content: space-around;

            >div {
                height: 100%;
                border: 1px solid #cbcbcb;
                padding: 0 10px;
                display: flex;
                align-items: center;
                margin-top: 5px;
                box-sizing: border-box;

                >img {

                    width: 20px;
                    height: 20px;
                }

                >div {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }
            }
        }

        .chart {
            width: 100%;
            height: calc(100% - 45px);
        }
    }
}
</style>